<template>
	<view class="search">
		<view class="searchBox">

			<!-- #ifdef H5 -->
			<image @tap="uni.navigateBack()" src="../../static/images/back_icon.png" mode="scaleToFill"></image>
			<input type="text" v-model="term" placeholder="搜索你想要的商品" />
			<button type="primary" @tap="getSearch()">搜索</button>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<input @blur="getSearch" type="text" v-model="term" placeholder="搜索你想要的商品" />
			<!-- #endif -->
		</view>
		<view class="searchHistory" v-if="!isSearch">
			<view class="header">
				<view>
					最近搜索
				</view>
				<image src="../../static/images/del.png" @tap="delHistory()" mode="scaleToFill"></image>
			</view>
			<view class="uni-list">
				<view class="uni-list-cell histiryList" @tap="getSearchBtn(item)" v-for="(item,index) in historyList" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<view class="searchCommodityList" v-if="isSearch">
			<view class="searchheader">
				<view @tap="changeCurrent(0)" class="selectBtns" v-bind:class="{active:current == 0 }">
					综合
				</view>
				<view @tap="changeCurrent(1)" class="selectBtns" v-bind:class="{active:current == 1 }">
						<xfl-select
							:list="saleList"
							:clearable="false"
							@change = "changeSale"
							:initValue="'销量降序'"
							class="select"
						>
						</xfl-select>
				</view>
				<view @tap="changeCurrent(2)" class="selectBtns" v-bind:class="{active:current == 2 }">
					<xfl-select
						:list="priceList"
						:clearable="false"
						@change = "changePrice"
						:initValue="'价格升序'"
						class="select"
					>
					</xfl-select>
				</view>
			</view>
		
			<view >
				<view class="uni-list selectLists">
					<view class="uni-list-cell selectList" @tap="goInfo(item.id)" v-for="(item,index) in commodityList" :key="index">
						<view class="imgbox">
							<image :src="item.pic.split(',')[0]" mode="scaleToFill"></image>
						</view>
						<view class="desction">
							{{item.name}}
						</view>
						<view class="priceBox">
							<view class="price">
								￥{{item.price}}
							</view>
							<view class="salesNum">
								总销量{{item.sale}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="empty" v-if="isSearch && commodityList.length == 0">
			<image src="../../static/images/sousuo.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import xflSelect from '../../components/xfl-select/xfl-select.vue';     //导入
	export default {
		components: { xflSelect }, 
		data() {
			return {
				term: "",
				historyList: [],
				current:0,
				isUpimg:false,
				isUpimg2:false,
				status:0,
				pageNum:1,
				isSearch:false,
				searchRule:0,
				commodityList:[],
				loadStatusText:"加载中...",
				saleList: [ {key:4,value:"销量降序"},{key:5,value:"销量升序"}],
				priceList: [ {key:2,value:"价格升序"},{key:1,value:"价格降序"}],
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'historyList',
				success: res => {
					if (res.data == null) {
						this.historyList = []
					} else {
						this.historyList = JSON.parse(res.data)
					}
				}
			})
		},
		onReachBottom() {
			this.getSearchData()
		},
		methods: {
			//获取搜索词搜索
			getSearch() {
				this.pageNum = 1
				if (this.term.length > 0 ) {
					for (let i = 0; i < this.historyList.length; i++) {
						if (this.historyList[i] == this.term) {
							this.historyList.splice(i, 1)
						}
					}
					this.historyList.unshift(this.term)
					this.isSearch = true;
					this.commodityList = []
					this.getSearchData()
					uni.setStorage({
						key: 'historyList',
						data: JSON.stringify(this.historyList),
					})
				}
			},
			//点击历史搜索词搜索
			getSearchBtn(item) {
				this.term = item;
				if (this.term.length > 0) {
					for (let i = 0; i < this.historyList.length; i++) {
						if (this.historyList[i] == this.term) {
							this.historyList.splice(i, 1)
						}
					}
					this.historyList.unshift(this.term)
					this.isSearch = true;
					this.getSearchData()
					uni.setStorage({
						key: 'historyList',
						data: JSON.stringify(this.historyList),
					})
				}
			},
			//删除历史记录
			delHistory() {
				var _this = this
				uni.showModal({
					content: '确定删除全部搜索记录？',
					confirmColor:"#F63810",
					success: function(res) {
						if (res.confirm) {
							_this.historyList = []
							uni.setStorage({
								key: 'historyList',
								data: _this.historyList,
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			//点击综合等按钮
			changeCurrent(num){
				this.current = num;
				this.pageNum = 1;
				this.commodityList = []
				if(num == 0){
					this.searchRule = 0
				}else if(num == 1){
					this.searchRule = 4
				} else if(num == 2){
					this.searchRule = 2
				} 
				this.getSearchData()
			},
			changeSale(e){
					this.current = 1
					this.searchRule = e.orignItem.key;
					this.pageNum = 1;
					this.commodityList = []
					this.getSearchData()
			},
			changePrice(e){
					this.current = 2
					this.searchRule = e.orignItem.key;
					this.pageNum = 1;
					this.commodityList = []
					this.getSearchData()
			},
			//获取搜索到的数据
			getSearchData(){
				var _this = this;
				let data = {
					name:this.term,
					pageNum:this.pageNum,
					pageSize:10,
					sortRule:this.searchRule
				}
				this.$http.post(this.$http.baseUrl + '/api/v1.0/app/product/SearchProduct',data,res=>{
					_this.pageNum ++ 
					if(res.data.data.length == 0){
						_this.loadStatusText = "已加载全部"
						return false;
					}else{
						if(_this.commodityList.length == 0){
							_this.commodityList = res.data.data;
							_this.loadStatusText = "加载成功"
						}else{
							_this.commodityList = _this.commodityList.concat(res.data.data);
							
							_this.loadStatusText = "加载成功"
						}
					}
				})
			},
			goInfo(id){
				uni.navigateTo({
					url:'../details/details?id=' + id
				})
			}

		},
		watch:{
			term(newval,oldval){
				// console.log(newval,oldval)
			}
		}
	}
</script>

<style lang="scss">
	.search {
		min-height: 100vh;
		background-color: #f2f2f2;
		box-sizing: border-box;
		.empty{
			height: 50vh;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 384upx;
				height: 330upx;
			}
		}
		.searchBox {
			padding-top: 56upx;
			padding-bottom: 20upx;
			padding-left: 30upx;
			background-color: #F2F2F2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 64upx;

			image {
				width: 48upx;
				height: 48upx;
			}

			input {
				background-color: #fff;
				font-size: 28upx;
				border-radius: 32upx;
				padding-left: 30upx;
				height: 64upx;
				width: 694upx;
				box-sizing: border-box;
				// #ifdef H5
				width: 493upx;
				margin-left: 30upx;
				// #endif
			}

			button {
				width: 106upx;
				height: 64upx;
				background-color: #E8271B;
				color: #fff;
				font-size: 28upx;
				padding: 0;
				border-radius: 32upx;
			}
		}

		.searchHistory {
			width: 694upx;
			margin: 43upx auto 0;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				margin-bottom: 30upx;
				color: #999;

				image {
					width: 36upx;
					height: 36upx;
				}
			}

			.histiryList {
				display: inline-block;
				height: 56upx;
				padding: 0 30upx;
				line-height: 56upx;
				color: #4d4d4d;
				font-size: 26upx;
				background-color: #fff;
				border-radius: 28upx;
				font-weight: 500;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
		}
		.searchCommodityList{
			background-color: #f2f2f2;
			.searchheader{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 40upx;
				.selectBtns{
					width: 20%;
					text-align: center;
					font-size: 26upx;
					color: #4d4d4d;
					.selectImg{
						width: 12upx;
						height: 22upx;
						margin-left: 10upx;
					}
					&.active{
						color: #F63810;
						.select{
							.input{
								color: #F63810;
							}
							.right-arrow{
								color: #F63810;
							}
						}
					}
				}
			}
			.selectLists{
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 0 28upx;
				margin-top: 50upx;
				background-color: #f2f2f2;
				flex-wrap: wrap;
				box-sizing: border-box;
				.selectList{
					border-radius: 20upx;
					background-color: #fff;
					overflow: hidden;
					width: 334upx;
					height: 530upx;
					margin-right: 25.7upx;
					margin-bottom: 26upx;
					&:nth-child(2n){
						margin-right: 0;
					}
					image{
						width: 334.3upx;
						height: 333upx;					
					}
					.desction{
						width: 297upx;
						margin: 24upx auto;
						color: #333;
						font-weight: 500;
						font-size: 28upx;
						display: -webkit-box;
						overflow: hidden; 
						white-space: normal!important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.priceBox{
						display: flex;
						justify-content: space-between;
						width: 297upx;
						margin: 0 auto;
						.price{
						color: #F63810;
						font-size: 24upx;
							text{
								font-size: 32upx;
								font-weight: bold;
							}
						}
						.salesNum{
							color: #4d4d4d;
							font-size: 24upx;
						}
					}
					
				}
			}
		}
		.loadStatusText{
			font-size: 24upx;
			text-align: center;
			color: #999999;
			height: 100upx;
			line-height: 100upx;
		}
	}
</style>
